<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML新特性</title>
	</head>
	<body>
		<button type="button" onclick="fun1()">为下列输入控件赋值</button> <br>
		这是type="color"(颜色)：<input type="color"/> <br>
		这是type="month"(年月)：<input type="month"/> <br>
		这是type="week"(年和周)：<input type="week"/> <br>
		这是type="date"(年月日)：<input type="date"/> <br>
		这是type="time"(时间)：<input type="time"/> <br>
		这是type="datetime"(年月日时分秒，chrome不支持)：<input type="datetime"/> <br>
		这是type="datetime-local"(年月日时分秒)：<input type="datetime-local"/> <br>
		<hr>
		<form action="#" method="get">
			这是type="email"(邮箱)：<input type="email" required="required" /> <br>
			这是type="number"(数字，火狐不支持)：<input type="number" required="required" max="100" /> <br>
			这是type="url"(网址)：<input type="url" required="required"/> <br>
			这是type="range"(滑动条，chrome不支持)：<input type="range" min="0" max="100" /> <br>
			这是type="tel"(电话号码，都不支持)：<input type="tel"  /> <br>
			<input type="submit" value="提交"/> <br>
		</form>
		<hr>
		这是datalist(选择浏览器)：<input list="br"/>
		<datalist id="br">
			<option>chrome</option>
			<option>fixfire</option>
			<option>IE</option>
			<option>360</option>
		</datalist>
		<hr>
		<form action="https://www.baidu.com/s" method="get">
			这面的输入框必须填入值：<br>
			<input type="text" required="required" name="wd"/> &nbsp;<input type="text" autofocus="true" placeholder="这个文本框会自动获取焦点"> 
			<input type="submit" value="提交" />
		</form>
		<script>
		function fun1(){
			var arrays = document.getElementsByTagName("input");
			arrays[0].value="#FFFFFF";
			arrays[1].value="2022-05";
			arrays[2].value="2022-W18";
			arrays[3].value="2022-05-18";
			arrays[4].value="12:20";
			arrays[6].value="2022-05-04T12:20";
			arrays[7].value="2058274538@qq.com";
			arrays[8].value="20";
			arrays[9].value="http://www.pzhuweb.cn";
			arrays[10].value="50";
		}
		</script>
	</body>
</html>
